import React, {useEffect, useState} from 'react';
import {Switch, Route, Redirect} from 'react-router-dom'
import axios from "axios";
import {Spin} from 'antd'
import {connect} from 'react-redux'
import Home from "../../views/sandbox/home/Home";
import UserList from "../../views/sandbox/user-manage/UserList";
import RoleList from "../../views/sandbox/right-manage/RoleList";
import RightList from "../../views/sandbox/right-manage/RightList";
import NoPermission from "../../views/sandbox/nopermission/NoPermission";
import NewsAdd from "../../views/sandbox/news-manage/NewsAdd";
import NewsDraft from "../../views/sandbox/news-manage/NewsDraft";
import NewsCategory from "../../views/sandbox/news-manage/NewsCategory";
import Audit from "../../views/sandbox/audit-manage/Audit";
import AuditList from "../../views/sandbox/audit-manage/AuditList";
import Unpublished from "../../views/sandbox/publish-manage/Unpublished";
import Published from "../../views/sandbox/publish-manage/Published";
import Sunset from "../../views/sandbox/publish-manage/Sunset";
import NewsPrevView from "../../views/sandbox/news-manage/NewsPrevView";
import NewsUpdate from "../../views/sandbox/news-manage/NewsUpdate";

function NewsRouter(props) {
    const [routerList, setRouterList] = useState([])

    useEffect(() => {
        axios.get('/rights?_embed=children').then(res => {
            // console.log(res.data)
            const list = [
                ...res.data,
                ...res.data.map(item => item.children)
            ]
            const newRouterList = list.flat()
            setRouterList(newRouterList)
        })
    }, [])

    const LocalRouterMap = {
        '/home': Home,
        '/user-manage/list': UserList,
        '/right-manage/role/list': RoleList,
        '/right-manage/right/list': RightList,
        '/news-manage/add': NewsAdd,
        '/news-manage/draft': NewsDraft,
        '/news-manage/category': NewsCategory,
        '/news-manage/preview/:id': NewsPrevView,
        '/news-manage/update/:id': NewsUpdate,
        '/audit-manage/audit': Audit,
        '/audit-manage/list': AuditList,
        '/publish-manage/unpublished': Unpublished,
        '/publish-manage/published': Published,
        '/publish-manage/sunset': Sunset,
    }

    const {role: {rights}} = JSON.parse(localStorage.getItem('token'))
    // 校验需要创建的路径

    // 在权限列表中删除和修改权限，都需要重新验证需要创建的路径
    const checkRoute = (item) => {
        return LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
    }

    // 只创建该用户拥有的路径权限
    const checkUserPermission = (item) => {
        return rights.includes(item.key)
    }

    return (
        <div>
            <Spin size="large" spinning={props.isLoading}>  {/* 加载中: spinning：控制加载显示和隐藏 */}
                {/*  将二级路由放到组件中来  */}
                <Switch>
                    {routerList.map(item => {
                        if (checkRoute(item) && checkUserPermission(item)) {
                            return <Route key={item.id} path={item.key} component={LocalRouterMap[item.key]} exact/>
                        } else {
                            return null
                        }
                    })}

                    {/* exact：精确匹配 */}
                    <Redirect from='/' to='/home' exact/>
                    {/* 在精确匹配下，*：除以上情况后，都进入 NoPermission */}
                    {routerList.length > 0 && <Route path='*' component={NoPermission}/>}
                </Switch>
            </Spin>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        isLoading: state.LoadingReducer.isLoading
    }
}

export default connect(mapStateToProps)(NewsRouter)